<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>NiceMark</title>
    <link rel="stylesheet/less" type="text/css" href="less/styles.less"/>
    <link rel="stylesheet" type="text/css" href="css/codemirror/codemirror.css"/>
    <link rel="stylesheet" type="text/css" href="css/codemirror/foldgutter.css"/>
    <link rel="stylesheet" type="text/css" href="css/codemirror/theme/nicemark.css"/>
    <link rel="stylesheet" type="text/css" href="css/tree.css"/>
    <link rel="stylesheet" type="text/css" href="css/preview.css"/>
    <link rel="stylesheet" href="css/highlight/nicemark.css"/>
    <script>
        less = {
            fileAsync: true
        };
    </script>
    <script type="text/javascript" src="js/lib/less.min.js"></script>
    <script type="text/javascript" src="js/lib/codemirror/codemirror.js"></script>
    <script type="text/javascript" src="js/lib/codemirror/overlay.js"></script>
    <script type="text/javascript" src="js/lib/codemirror/scrollpastend.js"></script>
    <script type="text/javascript" src="js/lib/codemirror/continuelist.js"></script>
    <script type="text/javascript" src="js/lib/codemirror/foldcode.js"></script>
    <script type="text/javascript" src="js/lib/codemirror/foldgutter.js"></script>
    <script type="text/javascript" src="js/lib/codemirror/markdown-fold.js"></script>
    <script type="text/javascript" src="js/lib/codemirror/xml.js"></script>
    <script type="text/javascript" src="js/lib/codemirror/markdown.js"></script>
    <script type="text/javascript" src="js/lib/codemirror/gfm.js"></script>
    <script type="text/javascript" src="js/lib/marked.js"></script>
    <script type="text/javascript" src="js/lib/highlight.pack.js"></script>
    <script>
        hljs.initHighlightingOnLoad();
    </script>
    <script type="text/javascript" src="js/lib/jspdf.min.js"></script>
    <script type="text/javascript" src="js/lib/raphael.min.js"></script>
    <script type="text/javascript" src="js/lib/flowchart.min.js"></script>
    <script type="text/javascript" src="js/lib/underscore-min.js"></script>
    <script type="text/javascript" src="js/lib/sequence-diagram-min.js"></script>
    <script type="text/javascript" src="js/lib/mathjax/MathJax.js?config=TeX-AMS_SVG-full"></script>
    <script type="text/x-mathjax-config">
			MathJax.Hub.Config({messageStyle: "none", showProcessingMessages: false, tex2jax: { inlineMath: [['$','$']], displayMath: [ ['$$','$$']]}, jax: ["input/TeX","output/SVG"]});

    </script>
</head>

<body>
<!--about dialog-->
<div id="about-dialog" class="dialog-layout" cancelable>
    <div class="dialog-container">
        <h3>关于</h3>
        <p class="text-center"><img src="img/icon.png"></p>
        <h4 class="text-center">NiceMark，享受书写的乐趣</h4>
        <p class="text-center"><a class="github" href="javascript:void(0)"
                                  onclick="win.openUrl('https://github.com/dongkuo/NiceMark')">https://github.com/dongkuo/NiceMark</a>
        </p>
    </div>
</div>
<!--关联本地目录dialog-->
<div id="add-local-folder-dialog" class="dialog-layout" cancelable>
    <div class="dialog-container">
        <h3>添加本地目录</h3>
        <p>
            <label for="local-folder-input">目录：</label>
            <input id="local-folder-input" type="text" disabled/> &#12288;
            <a href="javascript:void(0)" onclick="workspace.chooseLocalFolder()">点击选择...</a>
        </p>
        <p>
            <label for="local-name-input">名称：</label>
            <input id="local-name-input" type="text" onchange="workspace.checkLocalName()"/> &#12288;
            <span id="local-tip" class="color-tip">工作空间中显示的名称</span>
        </p>
        <p class="text-right">
            <button class="color-cancel" dialog-dismiss="add-local-folder-dialog">取消</button>
            <button id="btn-local-submit" class="btn-positive color-success">添加</button>
        </p>
    </div>
</div>
<!--关联本地目录dialog end-->
<!--新建文档dialog-->
<div id="new-doc-dialog" class="dialog-layout">
    <div class="dialog-container">
        <h3>新建文档</h3>
        <p>
            <label for="doc-name-input">文档名：</label>
            <input id="doc-name-input" type="text"/> &#12288;
            <span id="doc-name-tip" class="color-tip"></span>
        </p>
        <p class="text-right">
            <button class="color-cancel" dialog-dismiss="new-doc-dialog">取消</button>
            <button id="btn-local-ok" class="btn-positive color-success">确定</button>
        </p>
    </div>
</div>
<!--message-dialog-->
<div id="message-dialog" class="dialog-layout" cancelable>
    <div class="dialog-container">
        <h3 class="dialog-title"></h3>
        <p class="dialog-content"></p>
        <p class="text-right">
            <button class="color-success btn-positive">确定</button>
            <button class="color-success btn-negative"></button>
            <button class="color-cancel" dialog-dismiss="message-dialog">取消</button>
        </p>
    </div>
</div>
<!--toast-->
<div id="toast-layout">
    <div id="toast-container">
    </div>
</div>
<!--hidden-->
<div id="cover" class="hidden"></div>
<div id="mathjax-buffer" class="hidden"></div>
<div id="chart-buffer" class="invisible"></div>
<div id="sequence-buffer" class="invisible"></div>
<iframe id="print-iframe" class="hidden" src="template/pdf-template.html"></iframe>
<!--标题栏-->
<div id="titlebar">
    <img id="titlebar-logo" src="img/logo.png" onclick="win.about()"/>
    <p id="titlebar-title">NiceMark，享受书写的乐趣</p>
    <ul id="titlebar-control">
        <li class="material-icons" onclick="win.toogleFullScreen()">fullscreen</li>
        <li class="material-icons" onclick="win.minimize()">remove</li>
        <li class="material-icons" onclick="win.toggleMaximize()">crop_square</li>
        <li class="material-icons" onclick="win.preClose()">close</li>
    </ul>
</div>
<!--主要部分-->
<div id="main">
    <!--侧滑栏-->
    <div id="workspace-container">
        <div id="workspace-search">
            <input id="workspace-search-input" type="text"/>
            <i id="workspace-search-btn" class="material-icons">search</i>
            <ul id="workspace-search-box">
                <li selected>
                    <p class="workspace-search-box-doc-name">文档搜索，暂未未实现</p>
                    <p class="workspace-search-box-doc-location">/home/xxx/文档搜索，暂未未实现.md</p>
                </li>
                <li>
                    <p class="workspace-search-box-doc-name">文档搜索，暂未未实现</p>
                    <p class="workspace-search-box-doc-location">/home/xxx/文档搜索，暂未未实现.md</p>
                </li>
                <li>
                    <p class="workspace-search-box-doc-name">文档搜索，暂未未实现</p>
                    <p class="workspace-search-box-doc-location">/home/xxx/文档搜索，暂未未实现.md</p>
                </li>
                <li>
                    <p class="workspace-search-box-doc-name">文档搜索，暂未未实现</p>
                    <p class="workspace-search-box-doc-location">/home/xxx/文档搜索，暂未未实现.md</p>
                </li>
                <li>
                    <p class="workspace-search-box-doc-name">文档搜索，暂未未实现</p>
                    <p class="workspace-search-box-doc-location">/home/xxx/文档搜索，暂未未实现.md</p>
                </li>
                <li>
                    <p class="workspace-search-box-doc-name">文档搜索，暂未未实现</p>
                    <p class="workspace-search-box-doc-location">/home/xxx/文档搜索，暂未未实现.md</p>
                </li>
                <li>
                    <p class="workspace-search-box-doc-name">文档搜索，暂未未实现</p>
                    <p class="workspace-search-box-doc-location">/home/xxx/文档搜索，暂未未实现.md</p>
                </li>
                <li>
                    <p class="workspace-search-box-doc-name">文档搜索，暂未未实现</p>
                    <p class="workspace-search-box-doc-location">/home/xxx/文档搜索，暂未未实现.md</p>
                </li>
            </ul>
        </div>
        <div id="workspace-tree"></div>
    </div>
    <!--侧滑栏  end-->
    <div id="main-container">
        <!--editor-->
        <div id="editor-container">
            <!--编辑器工具栏-->
            <div id="editor-toolbar" class="toolbar">
                <ul class="float-left">
                    <li class="material-icons toolbar-item" title="工作空间" onclick="workspace.toggle()">apps</li>
                </ul>
                <ul class="inline-block">
                    <li class="material-icons toolbar-item" title="加粗" onclick="editor.bold()">format_bold</li>
                    <li class="material-icons toolbar-item" title="斜体" onclick="editor.italic()">format_italic</li>
                    <li class="material-icons toolbar-item" title="分隔线" onclick="editor.hr()">drag_handle</li>
                    <li class="material-icons toolbar-item" title="引用" onclick="editor.quotation()">format_quote</li>
                    <li class="material-icons toolbar-item" title="代码" onclick="editor.code()">settings_ethernet</li>
                    <li class="material-icons toolbar-item" title="数学公式" onclick="editor.math()">functions</li>
                    <li class="material-icons toolbar-item" title="链接" onclick="editor.link()">insert_link</li>
                    <li class="material-icons toolbar-item" title="图片" onclick="editor.image()">insert_photo</li>
                    <li class="material-icons toolbar-item" title="表格" onclick="editor.table()">grid_on</li>
                    <li class="material-icons toolbar-item" title="有序列表" onclick="editor.ol()">format_list_numbered</li>
                    <li class="material-icons toolbar-item" title="无序列表" onclick="editor.ul()">format_list_bulleted</li>
                </ul>
                <ul class="float-right">
                    <li class="material-icons toolbar-item" title="编辑模式" onclick="editor.toggleMaximize()">mode_edit
                    </li>
                </ul>
            </div>
            <!--编辑区-->
            <div id="editor-wrap">
                <div id="editor">
                </div>
            </div>
        </div>
        <!--preview-->
        <div id="preview-container">
            <div id="preview-toolbar" class="toolbar">
                <ul class="float-left">
                    <li class="material-icons toolbar-item" title="预览模式" onclick="preview.toggleMaximize()">visibility
                    </li>
                </ul>
                <ul class="float-left horizontal-space-large">
                    <li class="material-icons toolbar-item " title="以html导出" selected>code</li>
                    <li class="material-icons toolbar-item " title="以pdf导出" onclick="preview.export2pdf()">
                        picture_as_pdf
                    </li>
                </ul>
                <ul id="align-radio-group" class="float-left horizontal-space-large radio-group">
                    <li class="material-icons toolbar-item radio-group-item" title="左对齐" selected>format_align_left</li>
                    <li class="material-icons toolbar-item radio-group-item" title="居中对齐">format_align_center</li>
                    <li class="material-icons toolbar-item radio-group-item" title="右对齐">format_align_right</li>
                </ul>
                <ul class="float-right">
                    <li id="content-checkbox" class="material-icons toolbar-item checkbox" title="目录">view_headline</li>
                </ul>
            </div>
            <div id="preview-wrap">
                <div id="preview"></div>
            </div>
            <!--目录-->
            <div id="content-container">
                <h2 id="content-title">目录
                    <small id="content-words">字数：0</small>
                </h2>
                <hr/>
                <div id="content-wrap"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/tree.js"></script>
<script type="text/javascript" src="js/win.js"></script>
<script type="text/javascript" src="js/workspace.js"></script>
<script type="text/javascript" src="js/editor.js"></script>
<script type="text/javascript" src="js/preview.js"></script>
</body>

</html>